<template>
  <view class="loading" :style="[$u.addStyle(customStyle)]">
    <view
      class="loading__spinner"
      :class="[`loading__spinner--circle`]"
      ref="ani"
      :style="{
        color: color,
        width: addUnit(size),
        height: addUnit(size),
        borderTopColor: color,
        borderBottomColor: otherBorderColor,
        borderLeftColor: otherBorderColor,
        borderRightColor: otherBorderColor,
      }"
    >
    </view>
  </view>
</template>

<script>
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
function hexToRgb(sColor, str = true) {
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  sColor = String(sColor).toLowerCase();
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      let sColorNew = "#";
      for (let i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
      }
      sColor = sColorNew;
    }
    // 处理六位的颜色值
    const sColorChange = [];
    for (let i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`));
    }
    if (!str) {
      return sColorChange;
    }
    return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`;
  }
  if (/^(rgb|RGB)/.test(sColor)) {
    const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
    return arr.map((val) => Number(val));
  }
  return sColor;
}

/**
 * 求两个颜色之间的渐变值
 * @param {string} startColor 开始的颜色
 * @param {string} endColor 结束的颜色
 * @param {number} step 颜色等分的份额
 * */
function colorGradient(
  startColor = "rgb(0, 0, 0)",
  endColor = "rgb(255, 255, 255)",
  step = 10
) {
  const startRGB = hexToRgb(startColor, false); // 转换为rgb数组模式
  const startR = startRGB[0];
  const startG = startRGB[1];
  const startB = startRGB[2];

  const endRGB = hexToRgb(endColor, false);
  const endR = endRGB[0];
  const endG = endRGB[1];
  const endB = endRGB[2];

  const sR = (endR - startR) / step; // 总差值
  const sG = (endG - startG) / step;
  const sB = (endB - startB) / step;
  const colorArr = [];
  for (let i = 0; i < step; i++) {
    // 计算每一步的hex值
    let hex = rgbToHex(
      `rgb(${Math.round(sR * i + startR)},${Math.round(
        sG * i + startG
      )},${Math.round(sB * i + startB)})`
    );
    // 确保第一个颜色值为startColor的值
    if (i === 0) hex = rgbToHex(startColor);
    // 确保最后一个颜色值为endColor的值
    if (i === step - 1) hex = rgbToHex(endColor);
    colorArr.push(hex);
  }
  return colorArr;
}
// 将rgb表示方式转换为hex表示方式
function rgbToHex(rgb) {
  const _this = rgb;
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  if (/^(rgb|RGB)/.test(_this)) {
    const aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
    let strHex = "#";
    for (let i = 0; i < aColor.length; i++) {
      let hex = Number(aColor[i]).toString(16);
      hex = String(hex).length == 1 ? `${0}${hex}` : hex; // 保证每个rgb的值为2位
      if (hex === "0") {
        hex += hex;
      }
      strHex += hex;
    }
    if (strHex.length !== 7) {
      strHex = _this;
    }
    return strHex;
  }
  if (reg.test(_this)) {
    const aNum = _this.replace(/#/, "").split("");
    if (aNum.length === 6) {
      return _this;
    }
    if (aNum.length === 3) {
      let numHex = "#";
      for (let i = 0; i < aNum.length; i += 1) {
        numHex += aNum[i] + aNum[i];
      }
      return numHex;
    }
  } else {
    return _this;
  }
}
export default {
  name: "loading",
  data() {
    return {
      // size: 28,
      // color: "#000",
    };
  },
  props: {
    size: [String, Number],
    color: {
      type: String,
      default: "#000",
    },
  },
  computed: {
    // 当为circle类型时，给其另外三边设置一个更轻一些的颜色
    // 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
    // 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
    otherBorderColor() {
      const lightColor = colorGradient(this.color, "#ffffff", 100)[80];
      return this.inactiveColor ? this.inactiveColor : lightColor;
    },
  },
  created() {},
  mounted() {},
  methods: {
    number(value) {
      return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value);
    },
    addUnit(value = "auto", unit = "rpx") {
      value = String(value);
      // 用uView内置验证规则中的number判断是否为数值
      return this.number(value) ? `${value}${unit}` : value;
    },
  },
};
</script>

<style lang="scss" scoped>
$loading-color: #c8c9cc !default;
$loading-width: 30px !default;
$loading-height: 30px !default;
$loading-max-width: 100% !default;
$loading-max-height: 100% !default;
$loading-semicircle-border-width: 2px !default;
$loading-semicircle-border-color: transparent !default;
$loading-semicircle-border-top-right-radius: 100px !default;
$loading-semicircle-border-top-left-radius: 100px !default;
$loading-semicircle-border-bottom-left-radius: 100px !default;
$loading-semicircle-border-bottom-right-radiu: 100px !default;
$loading-semicircle-border-style: solid !default;
$loading-circle-border-top-right-radius: 100px !default;
$loading-circle-border-top-left-radius: 100px !default;
$loading-circle-border-bottom-left-radius: 100px !default;
$loading-circle-border-bottom-right-radiu: 100px !default;
$loading-circle-border-width: 2px !default;
$loading-circle-border-top-color: #e5e5e5 !default;
$loading-circle-border-right-color: $loading-circle-border-top-color !default;
$loading-circle-border-bottom-color: $loading-circle-border-top-color !default;
$loading-circle-border-left-color: $loading-circle-border-top-color !default;
$loading-circle-border-style: solid !default;
$loading-host-font-size: 0px !default;
$loading-host-line-height: 1 !default;
$loading-dot-top: 0 !default;
$loading-dot-left: 0 !default;
$loading-dot-width: 100% !default;
$loading-dot-height: 100% !default;
$loading-dot-before-width: 2px !default;
$loading-dot-before-height: 25% !default;
$loading-dot-before-margin: 0 auto !default;
$loading-dot-before-background-color: currentColor !default;
$loading-dot-before-border-radius: 40% !default;

.loading {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: $loading-color;

  &__spinner {
    width: $loading-width;
    height: $loading-height;
    position: relative;
    box-sizing: border-box;
    max-width: $loading-max-width;
    max-height: $loading-max-height;
    animation: u-rotate 1s linear infinite;
  }

  &__spinner--semicircle {
    border-width: $loading-semicircle-border-width;
    border-color: $loading-semicircle-border-color;
    border-radius: $loading-semicircle-border-top-left-radius
      $loading-semicircle-border-top-right-radius
      $loading-semicircle-border-bottom-right-radiu
      $loading-semicircle-border-bottom-left-radius;
    border-style: $loading-semicircle-border-style;
  }

  &__spinner--circle {
    border-radius: $loading-circle-border-top-left-radius
      $loading-circle-border-top-right-radius
      $loading-circle-border-bottom-right-radiu
      $loading-circle-border-bottom-left-radius;
    border-width: $loading-circle-border-width;
    border-top-color: $loading-circle-border-top-color;
    border-right-color: $loading-circle-border-right-color;
    border-bottom-color: $loading-circle-border-bottom-color;
    border-left-color: $loading-circle-border-left-color;
    border-style: $loading-circle-border-style;
  }
}

/* #ifndef APP-NVUE */
:host {
  font-size: $loading-host-font-size;
  line-height: $loading-host-line-height;
}

.loading {
  &__spinner--spinner {
    animation-timing-function: steps(12);
  }

  &__dot {
    position: absolute;
    top: $loading-dot-top;
    left: $loading-dot-left;
    width: $loading-dot-width;
    height: $loading-dot-height;

    &:before {
      display: block;
      width: $loading-dot-before-width;
      height: $loading-dot-before-height;
      margin: $loading-dot-before-margin;
      background-color: $loading-dot-before-background-color;
      border-radius: $loading-dot-before-border-radius;
      content: " ";
    }
  }
}

@for $i from 1 through 12 {
  .loading__dot:nth-of-type(#{$i}) {
    transform: rotate($i * 30deg);
    opacity: 1 - 0.0625 * ($i - 1);
  }
}

@keyframes u-rotate {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

/* #endif */
</style>
